<template>
  <view class="main ">
    <u-navbar :is-back="true" :title="chartName" :title-bold="true" title-color="#fff" back-icon-color="#fff"  :background="{ backgroundColor: 'rgb(61, 95, 255)' }"></u-navbar>

    <view class="revolveBox">
      <qiun-data-charts type="line" :eopts="eopts" :chartData="chartData" :echartsH5="true" :echartsApp="true"
        v-if="chartData" />
    </view>
  </view>
</template>
<script>
import PickerItem from "@/components/pickerItem/pickerItem.vue"
export default {
  components: { PickerItem },
  data () {
    return {
      chartName:'',
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      chartData: {},
      unit:'',
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      eopts:{},
    };
  },
  onLoad (options) {
    let data = JSON.parse(options.data)
    this.chartData = data.chartData
    this.chartName=data.chartName
    this.unit = data.unit
    this.eopts =  {
            title: {
              text:this.unit,
              textAlign: "center",
              top: "8%",
              right: "7%",
              rotate: -90,
              textStyle: {
                fontSize: 12,
              },
            },
            legend: {
              rotation: -90,
              left: "10%",
              top: "center",
              orient: "vertical",
              icon: "circle",
            },
            grid: {
              left: "35%",
              right: "70",
              top: "15%",
            },
            color: [
              "#0acf97",
              "#3d5fff",
              "#0EECF1",
              "#ffff00",
              "#ffa500",
              "#0000FF",
              "#C43CC4",
              "#9400d3",
              "#9f79ee",
              "#696969",
              "#ff00ff",
              "#bdb76b",
              "#006400",
              "#00bfff",
              "#66cd00",
              "#8b8989",
              "#ff1493",
            ],
            tooltip: {
              trigger: "axis",
              show: true,
              backgroundColor: "#ffffff",
              triggerOn: "mousemove|click",
              borderColor: "#288CFE",
              borderWidth: 1,
              padding: [5, 10],
              extraCssText:
                "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;transform: rotate(90deg);",
              textStyle: {
                color: "#666666",
              },
            },
            xAxis: {
              type: "value", //数据
              position: "top", //x 轴的位置【top bottom】
              nameRotate: -90, //坐标轴名字旋转，角度值。
              axisLabel: {
                //坐标轴刻度标签的相关设置。
                rotate: 90, //刻度标签旋转的角度，
              },
              splitLine: {
                lineStyle: {
                  type: "dashed", //虚线
                },
              },
              // scale: true, //是否是脱离 0 值比例
            },
            yAxis: {
              axisLine: {
                lineStyle: {
                  color: "#666666",
                },
              },
              type: "category",
              inverse: "true", //是否是反向坐标轴。
              axisLabel: { rotate: -90 },
            },
            visualMap: [],
          }
    // this.searchData.customerName = options.customerNo
    // this.chartName=options.chartName
    // this.getServerData();
  },
  methods: {
    getServerData () {
      const result ={
    "code": 200,
    "data": "",
    "sign": false,
    "body": [
        {
            "times": "2024-01",
            "month": "1月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        },
        {
            "times": "2024-02",
            "month": "2月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        },
        {
            "times": "2024-03",
            "month": "3月",
            "entryCount": 0,
            "trainPeopleCount": 0,
            "completedCount": 0
        }
    ]
}

      //this.$get(`/train/trainCompleteTrend?customerNo=${this.customerNo}`).then(result => {
        if (result.body) {
          const arr = result.body

          let res = {
            categories: arr.map(el => el.month),
            series: [
              {
                name: "入职人数",
                data: arr.map(el => el.entryCount)
              },
              {
                name: "参与培训人数",
                data: arr.map(el => el.trainPeopleCount)
              },
              {
                name: "达标人数",
                data: arr.map(el => el.completedCount)
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }
      //})
    },
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}

.revolveBox {
  width: 100%;
  height: 1360rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  margin-top: 20rpx;
}

.chart-title {
  position: absolute;
  right: -350rpx;
  width: 770rpx;
  top: 50%;
  text-align: center;
  transform: rotate(90deg);
  font-weight: 700;
  color: #4565ff;
}
</style>